<template>
  <div class="tab-wrapper">
    <router-link :to="{path:`/classify/all/${id}`}"
                 tag="div"
                 class="item">综合</router-link>
    <router-link :to="{path: `/classify/time/${id}`}"
                 tag="div"
                 class="item">时间</router-link>
    <router-link :to="{path: `/classify/sales/${id}`}"
                 tag="div"
                 class="item">销量</router-link>
    <router-link :to="{path: `/classify/price/${id}`}"
                 tag="div"
                 class="item">价格</router-link>
  </div>
</template>
<script>
export default {
  name: 'orderTab',
  computed: {
    id () {
      return this.$route.params.id
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.tab-wrapper
  position fixed
  top 89px
  left 0
  height 90px
  display flex
  z-index 10
  width 100%
  background-color $common_bgc
  box-shadow 0px 6px 14px 0px rgba(5, 5, 5, 0.14)

  .item
    flex 1
    height 100%
    display flex
    justify-content center
    align-items center
    font-size $address

  .router-link-active
    color $tab_active
</style>
